<?php
	/*header('Content-type: text/html; charset=utf-8');
	session_start();	//start session
    if(!isset($_SESSION['userid'])){	//check if the user data is in the session
        header("location: login.php");	//if not redirect back to user
    }
	**/
?>

<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="style.css">
		<script src="jquery-1.11.0.js"></script>
		<script src="gen.js"></script>
		<script>
	
			function syncAjax(u){
                var obj= $.ajax(
                    {url:u,
                     async:false
                    }
                );
                return $.parseJSON(obj.responseText);
            }
			
		function edit(obj,id){
				//alert (r);
				var r=getDistrict(id);
				
				if(r.result==0){
					//show error message
					$("#divStatus").text(r.message);
					return;
				}
				//get the data from object r and put it in the form
				$("#district_id").prop("value", r.district.id);
				$("#district_name").prop("value", r.district.districtName);
				$("#district_capital").prop("value", r.district.districtCapital);
				$("#region_id").prop("value", r.district.regionId);
				//show the form
				//find where the user clicked and store it in x and y
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);
				//hide the add button
				document.getElementById("addbutton").style.display='none';
				//show the save button
				document.getElementById("savebutton").style.display='inline';

				//display the form
				$("#divEdit").fadeIn(1000);
			}
		
		function getDistrict(id){

				var u="district_action.php?cmd=1&district_id="+id;
				alert(u);
				console.log(u); //control check on the console
				
				return syncAjax(u);  //makes asynchronous call to the save page
			}
			
		function save(){
				//complete the url
				var id = document.getElementById("district_id").value;
				var dn = document.getElementById("district_name").value;
				var dc = document.getElementById("district_capital").value;
				var ri = document.getElementById("region_id").value;

				var u="subdistrict_action.php?cmd=4&d_id=" + id + "&d_name=" + dn + "&d_capital=" + dc + "&r_id=" + ri;

				console.log(u);
				
				$.getJSON(u,saveDone);

				changeStatus("changes saved!"); //changes text in the divStatus to display update

				cancel();

				reloadContent();
			}
			
		function saveDone(data){
				
				alert(data);
			}
			
		//hides the form
		function cancel(){
				//fade out the form in half a second
				$("#divEdit").fadeOut(500);
			}
			
		function deleteDistrict(obj,id){

				var u = "district_action.php?cmd=2&district_id=" + id;

				console.log(u);

				$.getJSON(u,saveDone);

				changeStatus("district deleted!"); //changes text in the divStatus to display update

				reloadContent();
			}
			
		function display_district(obj, id){ //displays the details of a selected district
				var r=getDistrict(id);
				if(r.result==0){
					//show error message
					$("#divStatus").text(r.message);
					return;
				}

				//makes text boxes readdonly for viewing only!
				$("#district_id").attr('readonly','readonly');
				$("#district_name").attr('readonly','readonly');
				$("#district_capital").attr('readonly','readonly');
				$("#region_id").attr('readonly','readonly');

				//hide the save button
				document.getElementById("savebutton").style.display='none';
				//hide the add button
				document.getElementById("addbutton").style.display='none';

				$("#district_id").prop("value", r.district.id);
				$("#district_name").prop("value", r.district.districtName);
				$("#district_capital").prop("value", r.district.districtCapital);
				$("#region_id").prop("value", r.district.regionId);


				var y=event.clientY;
				var x=event.clientX*1.5;

				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);

				$("#divEdit").fadeIn(1000);

			}
			
		function add_new(){

				var y=event.clientY;
				var x=event.clientX/2;

				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);

				//show hide the save button
				document.getElementById("savebutton").style.display='none';
				//how the add button
				document.getElementById("addbutton").style.display='inline';

				$("#divEdit").fadeIn(1000);
			}
			
		function add(){

				var id = document.getElementById("district_id").value;
				var dn = document.getElementById("district_name").value;
				var dc = document.getElementById("district_capital").value;
				var ri = document.getElementById("region_id").value;

				var u = "district_action.php?cmd=3&d_id=" + dn + "&d_name=" + dn + "&d_capital=" + dc + "&r_id=" + ri;

				console.log(u);

				$.getJSON(u,saveDone);

				reloadContent();

				changeStatus("New district added!"); //changes text in the divStatus to display update

				cancel(); //fade out the pop-up box

			}
			
		function reloadContent(){

				//prooves in the concolse that the funtion is being called
				console.log("reloading page function");

				//reloads the information displayed in divContent
				$("#divContent").load("district_list.php #divContent");
			}
			
		function changeStatus(message){

				//update status with message parameter
				$("divStatus").text(message); 
			}

	</script>
	
	</head>
	<body>
		<table id="contentTable">
			<tr>
				<td colspan="2" id="pageheader">
					health information system
				</td>
			</tr>
			<tr>
				<td id="mainnav">
					<div class="menuitem"><a href="Home.php">location</a></div>
					<div class="menuitem">opd cases</div>
					<div class="menuitem">health promotion</div>
					<div class="menuitem">nutrition</div>
					<div class="menuitem">child welfare</div>
					<div class="menuitem">family planning</div>
					<div class="menuitem"><a href="userslist.php">users</a></div>
					<div class="menuitem"><a href="logout.php">logout<a></div>
				</td>
				<td id="content">
					<div id="divPageMenu">
						<span class="menuitem" >Community Health Officer</span> | 
						<span class="menuitem" ><a href="district_list.php">Districts</a></span> | 
						<span class="menuitem" ><a href="community_lists.php">Communities<a/></span>
						<!-- <input type="text" id="txtSearch">
						<span class="menuitem">search</span> -->
						<form>
							<input type="text" placeholder="Search Districts" id="txtSearch" name="district_name">
							<span class="menuitem"><input type="submit" value="search"></span>
						</form>
					</div>
					<div id="divStatus" class="status">
						
					</div>
					<div id="divContent">
						Districts
						<div id = 'addNew' class='hotspot' onclick="add_new()">Add new district</div>
						<table class="reportTable" width="65%" >
							<tr class="header" >
								<td>District ID</td>
								<td>District Name</td>
							</tr>
<?php	
	include("district_functions.php");

	$obj=new district();

	if(isset($_REQUEST['district_name'])){
		$districtname = $_REQUEST['district_name'];
		
		if (!$obj->search_district($districtname)){
			echo "error";
			exit();
		}
	}else{
		if(!$obj->list_all()){
			echo "error";
			exit();
		}
	}

	
	
	$row=$obj->fetch();
	$row_counter=0;
	while($row){
		
		if($row_counter%2==0){
			$style=" class='row1' ";
		}else{
			$style=" class='row2'  ";
		}	
		$id=$row['district_id'];
		$name=$row['district_name'];
		echo "<tr $style >";
			echo "<td>$row[district_id]</td>";
			echo "<td><span class='hotspot' onclick='display_district(this,$id)'>$row[district_name]</span></td>";
			echo "<td><span class='hotspot' onclick='edit(this,$id)'>edit</span></td>";
			echo "<td><span class='hotspot' onclick='deleteDistrict(this,$id)'>delete</span></td>";
		echo "</tr>";
		$row=$obj->fetch();
		$row_counter++;
	}
?>
						</table>
					</div>
				</td>
			</tr>
		</table>
	<div id="divEdit" class="popupForm">
		<table class="tableForm" >
					<tr>
						<td class="label">District ID: </td>
						<td class="field">
							<input type="text" value="" id="district_id" >
						</td>
					</tr>
					<tr>
						<td class="label">District Name:</td> 
						<td class="field">
							<input type="text" value="" id="district_name">
						</td>
					</tr>
					<tr>
						<td class="label">District Capital:</td> 
						<td class="field">
							<input type="text" value="" id="district_capital">
						</td>
					</tr>
					<tr>
						<td class="label">Region ID:</td> 
						<td class="field">
							<input type="text" value="" id="region_id">
						</td>
					</tr>
					<tr>
						<td class="label"></td>
						<td class="field">
							<input type="button" value="save" onclick="save()" id = "savebutton" >
							<input type="button" value="cancel" onclick="cancel()" id = "" >
							<!--<a href=""><input type="button" value="view communities in this subdistrict"> redirects to a page displaying list of communities under subdistrict-->
							<input type="button" value="add district" onclick="add()" id="addbutton" >
						</td>
					</tr>
					<input type="hidden" value="" id="subdistrict_id">
		</table>
		<!-- validation popup div -->
		<div id="divConfirm"> 
			DO you really want to delete?
			<p><input type="button" value="yes" id= "yesButton" ></p>
		</div>
	</div>
	</body>
</html>	